<!--
@license
Copyright 2016 The TensorFlow Authors. All Rights Reserved.

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->

<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../paper-toggle-button/paper-toggle-button.html">
<link rel="import" href="../tf-storage/tf-storage.html">
<link rel="import" href="tf-regex-group.html">
<link rel="import" href="tensorboard-color.html">
<link rel="import" href="../vz-sorting/vz-sorting.html">

<!--
`tf-categorizer` turns an array of tags into an array of categories

The transformation from tags to categories is controlled by the user, through
interacting with the categorizer widget.

(See type signatures in categorizer.ts)

Example:
  <tf-categorizer tags="[[tags]]" categories="{{categories}}"></tf-categorizer>

Public Properties:
`tags` - Array of strings that are the tags to categorize. Should be one-way bound downward.
`categories` - Array of Categorizer.Category objects that are generated by the Categorizer.
  Are readOnly and notify: True. Expected to be one-way bound upward.

The categorizer provides inputs for adding regular expression rules and toggling whether
categories are exclusive.
-->
<dom-module id="tf-categorizer">
  <template>
    <div class="inputs">
      <tf-regex-group id="regexGroup" regexes="{{regexes}}"></tf-regex-group>
    </div>
    <style>
      :host {
        display: block;
      }
      paper-checkbox {
        --paper-checkbox-checked-color: var(--paper-grey-600);
        --paper-checkbox-unchecked-color: var(--paper-grey-600);
        font-size: 14px;
      }
    </style>
  </template>
  <script src="categorizer.js"></script>
  <script>
    Polymer({
      is: "tf-categorizer",
      properties: {
        regexes: {type: Array},
        tags: {type: Array},
        categoriesAreExclusive: {type: Boolean, value: true},
        fallbackCategorizer: {
          type: String,
          value: "TopLevelNamespaceCategorizer",
        },
        categorizer: {
          type: Object,
          computed: "computeCategorization(regexes.*, categoriesAreExclusive, fallbackCategorizer)",
        },
        categories: {type: Array, value: function() {return [];}, notify: true, readOnly: true},
      },
      observers: ['recategorize(tags.*, categorizer)'],
      computeCategorization: function(regexes, categoriesAreExclusive, fallbackCategorizer) {
        var categorizationStrategy = {
          categoryDefinitions: regexes.base,
          categoriesAreExclusive: categoriesAreExclusive,
          fallbackCategorizer: fallbackCategorizer,
        };
        return Categorizer.categorizer(categorizationStrategy);
      },
      recategorize: function() {
        this.debounce("tf-categorizer-recategorize", function (){
          var categories = this.categorizer(this.tags);
          this._setCategories(categories);
        })
      },
    });
  </script>
</dom-module>
